<template>
  <div class="content">
    <div class="top">
      <!-- 返回上一级 -->
      <nuxt-link to="/list/articles" class="link"> 
        <v-icon> mdi-chevron-left </v-icon>
        <span>文章列表</span>
      </nuxt-link>

      <hr />
      
      <!-- 标题 -->
      <div class="title"> {{item.title}} </div>

      <!-- 时间 -->
      <div class="date"> {{item.createdAt | date}} </div>

      <!-- 内容 -->
      <div class="text" v-html="item.content"></div>

      <!-- 标签 -->
      <div class="category"> {{item.category}} </div>
    </div>

    <!-- 评论 -->
    <div class="bottom">
      <h3>评论</h3>
      <hr />
      <div class="list">
        <!-- 头像 -->
        <div class="portrait">
          <a href="javascript:;">
            <img src="https://img0.baidu.com/it/u=251714043,2515586281&fm=26&fmt=auto" alt="">
            <!-- 名称 -->
            <div class="name">
              <p>我是派蒙</p>
              <p>01F</p>
            </div>
          </a>
        </div>
        <!-- 评论内容 -->
        <div class="text">
          <div class="content">
            听说孙悟空的皮肤要出了，不知道特效好看不，哈哈哈，应该还可以吧！！！
          </div>
          <!-- 别人的回复 -->
          <div class="reply">
            <p><span>wowoll:</span> 我觉得很赞！</p>
            <p><span>Faramata:</span> 独眼小宝拥有者。</p>
            <a href="javascript:;">显示全部评论 ></a>
          </div>
          <!-- 信息 -->
          <div class="information">
            <p class="date">10-12</p>
            <div class="three">
              <p>回复</p>
              <p>点赞143</p>
              <p>差评</p>
            </div>
          </div>
        </div>
      </div>
      <div class="list">
        <!-- 头像 -->
        <div class="portrait">
          <a href="javascript:;">
            <img src="https://img0.baidu.com/it/u=251714043,2515586281&fm=26&fmt=auto" alt="">
            <!-- 名称 -->
            <div class="name">
              <p>我是派蒙</p>
              <p>01F</p>
            </div>
          </a>
        </div>
        <!-- 评论内容 -->
        <div class="text">
          <div class="content">
            听说孙悟空的皮肤要出了，不知道特效好看不，哈哈哈，应该还可以吧！！！
          </div>
          <!-- 别人的回复 -->
          <div class="reply">
            <p><span>wowoll:</span> 我觉得很赞！</p>
            <p><span>Faramata:</span> 独眼小宝拥有者。</p>
            <a href="javascript:;">显示全部评论 ></a>
          </div>
          <!-- 信息 -->
          <div class="information">
            <p class="date">10-12</p>
            <div class="three">
              <p>回复</p>
              <p>点赞143</p>
              <p>差评</p>
            </div>
          </div>
        </div>
      </div>
      <div class="list">
        <!-- 头像 -->
        <div class="portrait">
          <a href="javascript:;">
            <img src="https://img0.baidu.com/it/u=251714043,2515586281&fm=26&fmt=auto" alt="">
            <!-- 名称 -->
            <div class="name">
              <p>我是派蒙</p>
              <p>01F</p>
            </div>
          </a>
        </div>
        <!-- 评论内容 -->
        <div class="text">
          <div class="content">
            听说孙悟空的皮肤要出了，不知道特效好看不，哈哈哈，应该还可以吧！！！
          </div>
          <!-- 别人的回复 -->
          <div class="reply">
            <p><span>wowoll:</span> 我觉得很赞！</p>
            <p><span>Faramata:</span> 独眼小宝拥有者。</p>
            <a href="javascript:;">显示全部评论 ></a>
          </div>
          <!-- 信息 -->
          <div class="information">
            <p class="date">10-12</p>
            <div class="three">
              <p>回复</p>
              <p>点赞143</p>
              <p>差评</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  async asyncData({ $axios, route }) {
    const { data } = await $axios.get(`articles/${route.params.index}`);
    return {
      item: data[0]
    }
  },
  filters: {
    // 处理日期过滤器
    date: function(data) {
      const date = new Date(data);

      const y = date.getFullYear();
      const m = date.getMonth() + 1;
      const d = date.getDate();

      return `${y} - ${m} - ${d}`;
    }
  }
}
</script>

<style lang="scss" scoped>
  .content {
    // 内容部分
    .top {
       background-color: #Fff;
       padding: 0.1rem 0.3rem 0.3rem;
      //  返回标题
       .link {
         display: flex;
         span {
           line-height: 23px;
           color: #75829d;
         }
       }
      //  横线
      hr {
        background-color: #e7e7e7;
        border: none;
        height: 1px;
      }
      // 标题
      .title {
        margin-top: .5rem;
        font-size: 18px;
        font-weight: 500;
        line-height: 30px;
        letter-spacing: 1px;
      }
      // 时间
      .date {
        margin-top: .3rem;
        color: #a3a3a3;
        text-align: center;
      }
      .text {
        margin: .5rem 0 .2rem;
        line-height: 25px;
        letter-spacing: 2px;
        font-size: 13px;
      }
    }
    // 评论部分
    .bottom {
      margin-top: 15px;
      padding: 10px;
      background-color: #fff;
      h3 {
        font-weight: 500;
        font-size: 15px;
        letter-spacing: 2px;
      }
      hr {
        border: none;
        height: 1px;
        margin: 10px 0;
        background-color: rgb(228, 228, 228);
      }
      .list {
        border-bottom: 1px solid #e9e9e9;
        margin-top: 10px;
        // 头像
        .portrait {
          a {
            display: flex;
            img {
              width: 40px;
              height: 40px;
              border-radius: 100%;
              object-fit: cover;
            }
            .name {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              margin-left: 10px;
            }
          }
        }
        // 评论内容
        .text {
          width: 80%;
          margin: 10px auto;
          font-size: 14px;
          line-height: 20px;
          letter-spacing: 2px;
          // 别人的回复
          .reply {
            margin: 10px auto;
            padding: 10px;
            border-radius: 5px;
            background-color: #e7e5e5;
            p {
              margin: 5px 0;
              span {
                color: rgb(13, 108, 218);
              }
            }
            a {
              display: block;
              margin-top: 10px;
            }
          }
          // 信息
          .information {
            display: flex;
            justify-content: space-between;
            color: #a3a3a3;
            font-size: 12px;
            .three {
              display: flex;
              p {
                margin: 0 10px;
              }
            }
          }
        }
      }
    }
  }
</style>